<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props</title>
</head>
<body>

 <div id="app">


 </div>

</body>
<script src="../lib/react/react.development.js"></script>
<script src="../lib/react/react-dom.development.j.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">

    /**
     * 函数式实现
     * */

    // function HelloMessage(props) {
    //     return <div>hello {props.name}</div>;
    // }
    //
    // const  element = <HelloMessage name="Martin"/>;
    //
    //
    // ReactDOM.render(element,document.getElementById('app'))



    class HelloMessage extends React.Component{

        render(){
            return <div>hello {this.props.name}</div>
        }
    }


    HelloMessage.defaultProps={
         name:'Mary'
    }

    const element  = <HelloMessage name="tea"/>

    ReactDOM.render(element,document.getElementById('app'));

</script>


</html>